<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="协议分类:">
						<el-cascader style="width: 100%;" v-model="state.param.categoryId" placeholder="请选择上级分类"
							:options="state.productCategoryList"
							:props="{ label: 'text', value: 'id', children: 'children',checkStrictly: true}" @change="getTableData"/>
					</el-form-item>
					<el-form-item label="文章状态:">
						<el-select v-model="state.param.isEnable"  placeholder="请选择分类状态" @change="getTableData">
							<el-option :key = null label = "全部" :value = null />
							<el-option :key = 1 label = "显示" :value = 1 />
							<el-option :key = 0 label = "不显示" :value = 0 />
						</el-select>
					</el-form-item>
					<el-form-item label="信息搜索">
						<el-input v-model="state.param.promiseName" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onOpenAdd('add', {})">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
						<el-button type="primary" @click="getTableData()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
						<el-table-column prop="promiseId" label="ID" show-overflow-tooltip width="80"></el-table-column>
						<el-table-column prop="promiseName" label="标题" show-overflow-tooltip></el-table-column>
						<el-table-column prop="categoryName" label="文章分类" show-overflow-tooltip></el-table-column>
						<el-table-column prop="viewNum" label="浏览量" show-overflow-tooltip></el-table-column>
						<el-table-column prop="author" label="作者" show-overflow-tooltip></el-table-column>
						<el-table-column prop="promiseIntro" label="文章简介" show-overflow-tooltip></el-table-column>
						<el-table-column label="状态" >
							<template #default="scope">
								<el-switch @Click="changeStatusFun(scope.row)" :model-value="scope.row.isEnable" :active-value=1 :inactive-value=0 />
							</template>
						</el-table-column>
						<el-table-column label="创建时间" show-overflow-tooltip>
							<template #default="scope">
								<el-tooltip effect="dark" :content="formatDate(new Date(scope.row.createdTime), 'YYYY-mm-dd HH:MM:SS')" placement="top-start">
									<span>{{ formatDate(new Date(scope.row.createdTime), 'YYYY-mm-dd') }}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template #default="scope">
								<el-link class="font16" :underline="false" type="primary" @click="onOpenAdd('edit',scope.row)"> 编辑</el-link>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<el-link class="font16" :underline="false" type="primary"@click="onRowDel(scope.row)"> 删除</el-link>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
								background v-model:page-size="state.tableData.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
			<addSpecsDialog ref="addSpecsDialogRef" @refresh="getTableData()" />
		</div>
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { productCategoryList} from '/@/api/commodity';
import { articleList, articleDelete,articleAdd} from '/@/api/common';
import { useRouter } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
const router = useRouter();
// 引入组件
const addSpecsDialog = defineAsyncComponent(() => import('/@/views/commodity/goodspecsTemp/components/addSpecsDialog.vue'));

// 定义变量内容
const addSpecsDialogRef = ref();
const state = reactive({
	// 分类list
	productCategoryList: [] as Array<any>,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			keyWords: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
	param:{
		categoryId:[],
		isEnable:null,
		promiseName:'',
	},
});

// 获取协议分类
const getCategoryList = async () => {
    // 创建一个新的对象  
    let obj = { text: '全部', id: null, };
    const { results } = await productCategoryList({ platformType: 2 });
    state.productCategoryList = results
    state.productCategoryList.unshift(obj);
}

// 获取模板列表
const getTableData = async () => {
	state.tableData.loading = true;
	let params = {
		promiseType:0,
		categoryId:null,
		isEnable:state.param.isEnable,
		promiseName: state.param.promiseName,
		pageNum: state.tableData.param.pageNum,
		pageSize: state.tableData.param.pageSize,
	}
	const { results } = await articleList(params);
	state.tableData.loading = false;
	state.tableData.data = results.records
	state.tableData.total = results.total;
}


const changeStatusFun = async(obj: any) => {
	ElMessageBox.confirm(`是否修改该文章状态`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    }).then(async () => {
		let params = {
			promiseId: obj.promiseId,
			isEnable: obj.isEnable == 1 ? 0 : 1,
		}
		const { method } = await articleAdd(params);
		if(method == 'success'){
			ElMessage.success('修改成功');
			getTableData();
		}
    });
};


// 打开修改角色弹窗
const onOpenAdd = (type:any,row: any) => {
	router.push({
		path: '/system/agreementManagement/list/add',
		query: {status: type, id: row.promiseId },
	});
};
// 删除文章
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将删除该文章，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		state.tableData.loading = true;
		const { results } = await articleDelete(row.promiseId);
		ElMessage.success('删除成功');
		state.tableData.loading = false;
		getTableData();
	}).catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 页面加载时
onMounted(() => {
	getCategoryList();
	getTableData();
});
</script>

<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>


